<template>
  <div>
    <headNav title=""></headNav>
    <img v-if="imgUrl" :src="imgUrl" mode="" style='max-width: 90%; margin: 0.35rem;'/>
    <div v-else class="flexCenter  headerXl" ref="imageWrapper">
      <img src="@/assets/img/my/certificate.png" mode="" >
      <span >{{user.name}}</span>
      <span class="spanTwo" >{{user.joinBenefitTime | formatDateTime('yyyy-MM-dd')}}</span>
    </div>

    <div class="flexCenter" style="width: 100%; margin-top: 0.4rem;" >
      <button type="default" >长按保存证书图片</button>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { teacherDirectoryApi } from '@/api/myNewApi'
import html2canvas from "@/util/html2canvas"
export default {
  components: {
    headNav
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode
    })
  },
  data () {
    return {
      user: '',
      imgUrl: ''
    }
  },
  methods: {
    toImage() {
        html2canvas(this.$refs.imageWrapper, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: "transparent"
        }).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;

        })
    },
  },
  async mounted() {
    this.user = await teacherDirectoryApi()
    console.log(this.user)

    this.$nextTick(() => {
        this.toImage()
    })
  }
}
</script>

<style lang="less" scoped>
.headerXl {
  width: 100%;
  margin-top: 0.4rem;
  position: relative;
  img {
    max-width: 90%;
  }
  span {
    position: absolute;
    top: 4.6rem;
    left: 2.4rem;
    font-size: 0.28rem;
    font-weight: 600;
  }
  .spanTwo {
    top: 6.7rem;
    font-size: 0.22rem;
  }
}

button {
  width: 5.6rem;
  height: 0.85rem;
  border: 0;
  background: #128FEF;
  color: #FFF;
  border-radius: 0.4rem;
  font-size: 0.32rem;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}
</style>
